<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>svg画笑脸</title>
        <style>
        	svg{
				/*border:1px solid blue;*/
				margin:20px auto;
				display:block;
			}
        </style>
    </head>
    <body>
    	<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    		<circle cx="100" cy="100" r="100" fill="#3399ff" />
    		<circle cx="50" cy="80" r="20" fill="#fff" />
    		<circle cx="150" cy="80" r="20" fill="#fff" />
    		<circle cx="45" cy="80" r="10" fill="#000">
                <!-- begin后面表示当id为eyestoleft的动画结束后过2s执行 -->
    			<animate id="eyestoright" attributeType="xml" attributeName="cx" from="45" to="55" dur="1" begin="0;eyestoleft.end+2s"/>
    			<animate id="eyestoleft" attributeType="xml" attributeName="cx" from="55" to="45" dur="1" begin="eyestoright.end+2s"/>
    		</circle>
    		<circle cx="145" cy="80" r="10" fill="#000">
    			<animate attributeType="xml" attributeName="cx" from="145" to="155" dur="1" repeatCount="indefinite" />
    		</circle>
    		<path d="M 44 140 A 80 80 0 0 0 150 140" fill="none" stroke="#fff" stroke-width="2"  />
    	</svg>
    </body>
</html>